<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加用户</title>
	<link rel="stylesheet" type="text/css" href="css/adminContent.css" />
	<!-- 导入 Vue 3 -->
	<script src="//unpkg.com/vue@next"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="body">
	<form id="form1">
		<table width="100%" cellspacing="0">
			<tr><td colspan="2" style="text-align: center;color: red;" v-html="tips.tip">&nbsp;</td></tr>
			<h1 style="text-align: center">添加用户</h1>
			<tr>
				<td width="46%">账号</td>
				<td><input v-model="user.uid"  name="uid"/><span v-text="tips.tipUid"></span></td>
			</tr>
			<tr>
				<td>用户名</td>
				<td><input v-model="user.uname"  name="uname"/><span v-text="tips.tipUname"></span></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input v-model="user.pwd"  name="pwd"/><span v-text="tips.tipPwd"></span></td>
			</tr>

			<tr>
				<td>手机号</td>
				<td><input v-model="user.uphone"   /><span v-text="tips.tipUphone"></span></td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td><input v-model="user.uemail"   /><span v-text="tips.tipUemail"></span></td>
			</tr>
			<tr>
				<td colspan="2" id="btnPanel">
					<input type="button" value="保存" @click="doAdd()"/>
					<input type="button" value="清空" @click="doClear()"/>
				</td>
			</tr>
		</table>
	</form>
</div>
</body>
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	Vue.createApp({
		data(){
			return {
				user:{
					uid:'',
					uname:'',
					pwd:'',
					uphone:'',
					uemail:'',
				},
				tips:{
					tip:'&nbsp;',
					tipUid:'*',
					tipPwd:'*',
					tipPwd2:'*'
				}
			}
		},
		methods:{
			/** 检查uid是否已被注册: async + await 现实同步请求 */
			async checkUid(){
				if(this.user.uid == ''){
					this.tips.tipUid = "用户名不能为空";
					return false;
				}else{
					this.tips.tipUid = "*";
					let isExisted = false;
					await axios({
						method: 'post',
						url:'/person/selectPerson',
						params:{
							uid:this.user.uid
						}
					}).then(res => {
						if('' != res.data && null != res.data){//用户名被注册
							isExisted = true;
						}
					});

					if(isExisted == true){
						this.tips.tipUid = "用户名已被注册";
						form1.uid.focus();	// 让用户名文本框获取焦点
						return false;
					}else{
						this.tips.tipUid = "*";
						return true;
					}
				}
			},
			/** 密码校验 */
			checkPwd(){
				if(/^\d{6}$/.test(this.user.pwd)){
					this.tips.tipPwd = "*";
					return true;
				}else{
					this.tips.tipPwd = "密码必须是6位数字！";
					return false;
				}
			},

			/** 新增保存*/
			async doAdd(){
				// checkUid()中走的是ajax, await的意思是等待 checkUid() 执行完毕，再执行后面的 checkPwd()
				if(/^\d{9}$/.test(this.user.uid)) {
					if (/^[0-9]*$/.test(this.user.uid)) {
						axios({
							method:'post',
							url:'/person/insert',
							params:this.user
						}).then(res => {
							if(res.data == true){
								this.tips.tip = "添加成功！";
							}else{
								this.tips.tip = "添加失败！";
							}
						});

						axios({
							type: 'put',
							url: '/users/EnrollUser',
							params: {
								uid: this.user.uid,
								pwd: this.user.pwd,
							}
						}).then(res =>{
						});

					} else {
						this.tips.tip="用户账号不正确,只能为数字"
					}
				}else {
					this.tips.tip="用户账号需九位数"
				}

			},
			doClear(){
				this.user.uid = '';
				this.user.uname = '';
				this.user.pwd = '';
				this.user.uphone = '';
				this.user.uemail = '';
			}
		}
	}).mount("#form1");
</script>
</html>

